<template>
	<view class="box-c d-ai-c">
		<view class="distribution-card box-c d-ai-c ">
			<view class="animated fadeInRight">
				<view class="distribution-type box d-flex betwen">
					<text @tap='changeActiveType(1)' class="flex-1 top send "
						:class="activeType == 1?'top-10':''">选择配送</text>
					<text @tap='changeActiveType(2)' class="flex-1 top sit"
						:class="activeType == 2?'top-10':''">到店自取</text>
				</view>
				<view v-show="activeType ==1">
					<view v-if="addressShow" class="address-card box " @tap="openAddressList">
						<view class="flex-5 d-ai-c">
							<view class="relation">
								<text>{{address.name}}</text>
								<text class="ml-2">{{address.phone}}</text>
							</view>
							<view class="address">
								<text>{{address.province}}{{address.city}}{{address.district}}{{address.address}}</text>
							</view>

						</view>
						<view class="flex-1 box d-ai-c d-jc-end">
							<text class="iconfont iconqianjin"></text>
						</view>

					</view>
					<view v-if="!addressShow" class="address-card box d-jc-c d-ai-c" @tap="openAddAddress()">
						<view class="add-address">
							<text class="iconfont iconjia"></text>
							<text>添加收货地址</text>
						</view>
					</view>

				</view>
				<view v-show="activeType ==2">
					<view class="address-card box ">
						<view class="flex-2 box-c">
							<view class="flex-1">
								<text class="grey-text-color">
									{{shopInfo.city}} {{shopInfo.district}} {{shopInfo.address}}
								</text>
							</view>
							<view class="box flex-1">
								<view class="box-c">
									<text>自取时间</text>
									<view class="box d-ac-sb d-ai-c time-card" @tap='openTime'>
										<view class="flex-2 box-c">
											<text class="grey-shallow-text-color time ">{{date}}</text>
											<text class="grey-shallow-text-color time ">{{dateTime}}</text>
										</view>
										<view class="flex-1 box-c">
											<text class="iconfont iconqianjin "></text>
										</view>
									</view>

								</view>
								<view class="line box d-ai-c">
									<text></text>
								</view>
								<view class="box-c">
									<text>预留电话</text>
									<view class="phone box">
										<input @blur="addAppointInfo()" maxlength='11' number
											class="grey-shallow-text-color" type="text" v-model="appointPhone" />
										<text class="iconfont iconxiao47"></text>
									</view>

								</view>

							</view>
						</view>
						<view class="flex-1 map box d-jc-c">
							<image src="../../static/images/address/ditu@2x.png" mode="widthFix" />
							<view class="distance box-c d-ai-c d-ac-sb">
								<!-- <text>距离您1.8km</text> -->
								<image class="shop-logo" :src="shopInfo.shopLogo" mode="widthFix">
								</image>
							</view>


						</view>
					</view>

				</view>




			</view>
		</view>


		<view class="shop-info mt-2 box-c animated fadeIn">
			<view class="shop-name">
				<text>{{cart.shopName}}</text>
			</view>
			<scroll-view scroll-y="true" show-scrollbar=false :style="{height:productHeight+'px'}">
				<view class="box mt-2 product" v-for="item in cart.data">
					<view class="flex-1">
						<image :src="item.goodsLogo" mode=""></image>
					</view>
					<view class="flex-3 box d-jc-sb ml-2">
						<view class="box-c d-jc-sb product-name">
							<text class="">
								{{item.goodsName}}
							</text>
							<text>
								x{{item.number}}
							</text>
						</view>
						<view class="box-c d-jc-end total1">
							<text>{{item.goodsPrice}}积分</text>
						</view>
					</view>

				</view>
			</scroll-view>
		</view>

		<view class="payment box d-jc-sb animated fadeInUp" v-if="totalPrice !=0">
			<view class="box d-ai-c total p-2">
				<text>
					合计：
				</text>
				<text>
					{{(totalPrice).toFixed(2)}}积分
				</text>
			</view>
													<!-- @tap='subOrder()' -->
			<view class="box d-ai-c p-2" @tap='open()'>
				<button class="pay-btn"> 立即支付</button>
			</view>

		</view>
		<wybpopup ref="popup" type='bottom'>
			<view class="popup">
				<view class="pop-t">
					<image class="pop_images1" src="../../static/images/shoplist/guanbi@2x.png" mode="" @tap="close()"></image>
					<view>选择支付方式</view>
				</view>
				<view class="pop-c">
					<text>￥</text>
					<text>{{(totalPrice).toFixed(2)}}</text>
				</view>
				<radio-group @change="radioChange">
					<label class="uni-lab" v-for="(item, index) in items" :key="item.value">
						<view class="">
							<image v-if="item.value==='1'" class="pop_images2" src="../../static/images/shoplist/jfzf@2x.png" mode=""></image>
							<image v-if="item.value==='2'" class="pop_images2" src="../../static/images/shoplist/wxzf@2x.png" mode=""></image>
							<view class="pop-name">
								<text>{{item.name}}</text>
								<text v-if="item.value==='1'">(剩余{{userInfo.userInfo.accumulatePoints}}积分)</text>
							</view>
						</view>
						<view>
							<radio :value="item.value" :checked="index === current" />
						</view>
					</label>
				</radio-group>
				<button class="payment1" type="default" @tap='subOrder()'>
					立即支付
				</button>


			</view>

		</wybpopup>
	</view>
</template>

<script>
	import wybpopup from '@/components/wyb-popup/wyb-popup.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			wybpopup
		},
		data() {
			return {
				items: [{
						value: '1',
						name: '积分支付'
					},
					{
						value: '2',
						name: '微信支付',
						checked: 'true'
					}

				],
				current: 0,
				addressShow: '',
				addressList: [],
				address: '',
				cartList: [],
				cart: '',
				totalPrice: 0,
				ids: [],
				shopId: '',
				activeType: 1,
				dateTime: '', //时间
				date:'今天',
				realiTime:'',
				orderNo: '',
				appointPhone: '',
				shopList: [],
				shopInfo: '',
				productHeight: '500',
				goodsIds: ''
			}
		},
		computed: mapState(['reserveTime','userInfo']),
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.productHeight = res.windowHeight - uni.upx2px(550) //windoHeight为窗口高度，主要使用的是这个
				}
			})

		},
		onLoad(parameter) {
			console.log(parameter.shopId)
			console.log(parameter.goodsIds)
			this.goodsIds = parameter.goodsIds
			if (parameter.shopId != undefined && parameter.shopId != '') {
				this.shopId = parameter.shopId
				this.getCartList(parameter.shopId == undefined ? '' : parameter.shopId)
			}
			let time = new Date();
			this.dateTime = time.format('hh:mm') //显示当前时间
			this.realiTime = time.format('yyyy-MM-dd hh:mm') //显示当前时间
			console.log(this.dateTime)
			//清除时间
			this.delReserveTime()

		},
		onShow() {
			this.getUserInfo()
			this.getAddressList()
			// this.getCartList(this.shopId)
			this.getOrderNo()
			//重新赋值时间
			this.assignment()
		},
		methods: {
			...mapMutations(['logout', 'setUserInfo','delReserveTime']),
			// 获取用户信息
			getUserInfo() {

				console.log(this.loginState)
				console.log(this.userInfo)
				this.$api.getUserInfo().then((res) => {
					let userInfo = res.data.dataMap
					// this.getUserIn = res.data.dataMap
					console.log(userInfo)
					if (userInfo != null) {
						this.setUserInfo(userInfo)
					}

				})

			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			open() {
				// this.$refs.popup.open('bottom')
				this.$refs.popup.show()
			},
			close() {
				// this.$refs.popup.close()
				this.$refs.popup.hide()
			},
			//赋值时间
			assignment(){
				console.log(this.reserveTime)
				if(this.reserveTime !=''){
					this.dateTime = this.reserveTime.hours
					this.date = this.reserveTime.weeks
					this.realiTime = this.reserveTime.time
				}
			},
			//打开时间页面
			openTime(){
				uni.navigateTo({
					url:'./order-time'
				})
			},
			openMap() {
				uni.navigateTo({
					url: '../map/map'
				});
			},
			addAppointInfo() {
				console.log("失去焦点")
				this.updateUserAppointInfo()
			},
			getOrderNo() {
				if (this.orderNo != '') {
					uni.showToast({
						title: "订单状态已经改变！",
						duration: 1000,
						icon: 'none',
					});
					setTimeout(function() {
						uni.switchTab({
							url: '../user/user'
						})
					}, 1200);

				}

			},
			setTime(data) {
				this.dateTime = data.label
				this.updateUserAppointInfo()
			},

			//配送方式激活
			changeActiveType(activeType) {
				this.activeType = activeType
				if (this.activeType == 2) {
					this.getUserAppointInfo()
					this.getShopInfo()
				}

			},
			getShopInfo() {
				this.$api.getShopInfo({
					shopId: this.shopId
				}).then((res) => {
					if (res.statusCode == 200) {
						this.shopInfo = res.data.data
						uni.hideLoading()
					}
				})


			},
			updateUserAppointInfo() {
				let _this = this
				this.$api.updateUserAppointInfo({
					takesPhone: this.appointPhone,
					takesTime: this.realiTime
				}).then((res) => {
					if (res.data.code == 200) {

					}
				})
			},
			getUserAppointInfo() {
				let _this = this
				this.$api.getUserAppointInfo({}).then((res) => {
					if (res.data.code == 200) {
						_this.appointPhone = res.data.data.takesPhone

					}
				})
			},
			//订单支付
			subOrder() {
				if (this.ids.length < 1) {
					uni.showToast({
						title: "没有要结算的商品！",
						duration: 2000,
						icon: 'none',
					});
					return
				}
				console.log("=====" + this.address)
				if (this.activeType == 1 && !this.addressShow) {
					uni.showToast({
						title: "还没有添加收货地址！",
						duration: 2000,
						icon: 'none',
					});
					return
				}
				//选择支付方式弹框
				let type=1
				if(this.current===0){
					type=1
				}
				if(this.current===1){
					type=2
				}
				let parameter = {
					ids: this.ids,
					isTakes: this.activeType,
					takesTime: this.realiTime,
					takesPhone: this.appointPhone,
					isDispatching: this.activeType,
					addressId: this.address.id

				}
				this.$api.subOrder(parameter).then((res) => {
					// uni.hideLoading()
					if (res.data.code == 200) {
						//订单提交成功 开始支付
						const parameter = {
							"orderNo": res.data.data.orderNumber
						}
						this.orderNo = res.data.data.orderNumber
						console.log("=----------------" + JSON.stringify(res.data.data))
						this.payOrder(parameter,type)
					}
				})

			},
			payOrder(parameter,type) {
				parameter.type=type
				this.$api.payOrder(parameter).then((res) => {
					if(type==1){ //余额支付
						if (res.data.code == 200) {
							uni.showToast({
								title: '支付成功',
								duration: 1000
							});
							this.close()
							setTimeout(function() {
								uni.navigateTo({
									url: '../pay/pay-state'
								});
							}, 1200);
							// setTimeout(function() {
							// 	uni.switchTab({
							// 		url: '../user/user'
							// 	})
							// }, 1700);

						} else {
							uni.showToast({
								title: res.data.msg,
								duration: 1000,
								icon: "none"
							});
							setTimeout(function() {
								uni.navigateTo({
									url: '../pay/pay'
								});

							}, 1200);
						}
					}else if(type==2){
						uni.requestPayment({
							provider: "wxpay",
							orderInfo: res.data.data,
							success:(res)=> {
								uni.showToast({
									title: "支付成功",
									duration: 2500,
								});
								this.close()
								setTimeout(function() {
									uni.navigateTo({
										url: '../pay/pay-state'
									});
								}, 1700);

							},
							fail(e) {
								console.log(e)
								uni.showToast({
									title: "支付失败",
									duration: 2000,
									icon: 'none',
								});
								// plus.nativeUI.alert(JSON.stringify(e), function() {

								// }, "提示", "关闭")

							}
						})
					}
				})

			},
			openAddAddress() {
				uni.navigateTo({
					url: '../address/address-add'
				});
			},
			openAddressList() {
				uni.navigateTo({
					url: '../address/address'
				});

			},
			getAddressList() {
				let _this = this
				this.$api.getAddressList({}).then((res) => {
					if (res.data.code == 200) {
						_this.addressList = res.data.data
						if (_this.addressList.length > 0) {
							_this.address = _this.addressList[0]
							if (_this.address != '') {
								_this.addressShow = true
							}
						} else {
							_this.addressShow = false
						}
					}
				})
			},
			getCartList(shopId) {
				this.totalPrice = 0
				this.ids = []
				this.shopId = shopId
				this.$api.getCartList({
					shopId: this.shopId
				}).then((res) => {
					if (res.statusCode == 200) {
						this.cartList = res.data.data
						if (this.cartList.length > 0) {
							this.cart = this.cartList[0]
							console.log(JSON.stringify(this.goodsIds))
							if (this.goodsIds != undefined) {
								let arr = this.cart.data
								for (var i = 0; i < arr.length; i++) {
									if (this.goodsIds.indexOf(arr[i].goodsId) < 0) {
										delete arr[i]
									}
								}
								let arr2 = arr.filter(n => n) //去除空元素
								this.cart.data = arr2
							}
							for (var i = 0; i < this.cart.data.length; i++) {
								this.totalPrice +=  Number(this.cart.data[i].goodsPrice)*Number(this.cart.data[i].number)
								this.ids.push(this.cart.data[i].goodsId)
							}

						} else {
							uni.navigateTo({
								url: './order?payState=2'
							});
						}
					}
				})
			},

		}
	}
</script>

<style scoped>
	.payment1{
		width: 670rpx;
		height: 88rpx;
		background: #FF5551;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 100rpx;
	}
	.pop-name>text:nth-child(1){
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 13rpx;
	}
	.pop-name>text:nth-child(2){
		font-size: 32rpx;
		font-weight: 500;
		color: #999999;
		line-height: 120rpx;
	}
	.uni-lab>view:nth-child(1){
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.uni-lab{
		width: 690rpx;
		height: 100rpx;
		margin: 0rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}
	.pop_images2{
		width: 52rpx;
		height: 52rpx;
	}
	.pop-c{
		text-align: center;
		margin-bottom: 60rpx;
	}
	.pop-c>text:nth-child(1){
		font-size: 40rpx;
		font-weight: 800;
		color: #333333;
	}
	.pop-c>text:nth-child(2){
		font-size: 80rpx;
		font-weight: 800;
		color: #333333;
	}
	.pop-t{
		display: flex;
		align-items: center;
		text-align: center;
		margin-top: 40rpx;
	}
	.pop-t>view{
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 210rpx;
	}
	.pop_images1{
		width: 48rpx;
		height: 48rpx;
		margin-left: 40rpx;
	}
	.popup {
		width: 750rpx;
		height: 785rpx;
		background: #FFFFFF;
		border-radius: 60rpx 60rpx 0rpx 0rpx;
		overflow: hidden;
		z-index: 9999;
	}
	.product {
		padding: 0 30rpx;

	}

	.phone input {
		width: 240rpx;
		z-index: 99;
	}

	.phone {
		margin-top: 20rpx;
		position: relative;
	}

	.time {
		font-size: 24rpx;
		text-align: center;
	}

	.time-card {
		padding-top: 10rpx;
		width: 160rpx;

	}

	.iconqianjin {
		font-size: 24rpx;
		margin-left: 4rpx;
	}

	.iconxiao47 {
		color: #999999;
		font-size: 26rpx;
		position: absolute;
		right: 0rpx;

	}

	.line text {
		background-color: #EEEEEE;
		height: 100rpx;
		width: 4rpx;
		margin: 0 20rpx 0rpx -10rpx;
		border-radius: 50rpx;

	}

	.distance {
		position: absolute;
		top: 20rpx;
	}

	.distance text {
		color: #333333;
		background-color: #FFFFFF;
		padding: 5rpx 10rpx;
		font-size: 20rpx;
		border-radius: 50rpx;

	}

	.shop-logo {
		width: 80rpx !important;
		height: 80rpx !important;
		border: #FFFFFF solid 5rpx;
		border-radius: 10rpx;
		margin-top: 10rpx;
	}

	.map {
		position: relative;
		padding-left: 10rpx;
		margin-top: 40rpx;
	}

	.map image {
		width: 240rpx;
		height: 180rpx;
	}

	.betwen {
		border-top-left-radius: 15rpx;
		border-top-right-radius: 15rpx;
	}

	.sit {
		border-top-right-radius: 15rpx;
	}

	.send {
		border-top-left-radius: 15rpx;
	}

	.top {
		background-color: #FFECE5;
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		color: #666666;
		font-size: 30rpx;
	}

	.top-10 {
		background-color: #ffffff;
		margin-top: -20rpx;
		border-top-left-radius: 15rpx;
		border-top-right-radius: 15rpx;
		color: #FF5551;
		line-height: 130rpx;
	}

	.distribution-card {
		background-image: linear-gradient(to bottom, #FF5551, #FF6251 20%, #FD8C63, #f9f3f3);
		width: 750rpx;
	}

	.distribution-type {
		margin-top: 30rpx;
		background-color: #ffffff;
		height: 80rpx;
		width: 708rpx;
		text-align: center;
	}

	.add-address {
		color: #666666;
	}

	.iconjia {
		font-size: 22rpx;
		margin: 0rpx 10rpx;
	}

	.total1 {
		color: #FF5551;
	}

	.total text:nth-child(2) {
		color: #FF5551;
	}

	.product-name text:first-child {
		font-size: 30rpx;
		color: #333333;
	}

	.product-name text:last-child {
		font-size: 28rpx;
		color: #666666
	}

	.shop-info image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}

	.shop-name {
		color: #666666;
		font-size: 30rpx;
		padding: 0 30rpx;

	}

	.iconqianjin {
		color: #999999;
	}

	.relation text {
		font-size: 30rpx;
		color: #333333;
	}

	.address text {
		font-size: 20rpx;
		color: #999999;
	}

	.pay-btn {
		width: 200rpx;
		background-color: #FF5551;
		border-radius: 50rpx;
		color: #FFFFFF;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
	}

	.payment {
		background-color: #FFFFFF;
		height: 150rpx;
		width: 100%;
		position: absolute;
		bottom: 0rpx;
		/* z-index: 999; */
	}

	.shop-info {
		background-color: #FFFFFF;
		width: 710rpx;
		border-radius: 10rpx;
		padding: 20rpx 0rpx;
	}

	.address-card {
		width: 650rpx;
		min-height: 100rpx;
		background-color: #ffffff;
		padding: 20rpx 30rpx;
		border-bottom-left-radius: 15rpx;
		border-bottom-right-radius: 15rpx;
	}
</style>
